<template>
  <div
    class="media-center"
    :class="{'fetching-box': listFetching}">
    <el-container>
        <el-main class="leftMain">
          <div class="mediaTree">
            <el-tabs style="height: 100%" v-model="activeName" type="border-card">
              <el-tab-pane :label="$t('目录管理')" name="first">
                <media-menu-tree
                  style="min-height: 550px"
                  :is-can-check="false"
                  @currentNodeData="currentNodeDataChange"
                  :api-obj="menuApiObj"
                  :api-type="'1'" />
              </el-tab-pane>
              <el-tab-pane :label="$t('标签管理')" name="second">
                <div style="flex: 1">
                  <media-tag
                    v-for="t in tagList"
                    :key="t.id"
                    :label="t.name"
                    :active="tagIds === t.id"
                    @click="handleTagClick(t)"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
        <el-main class="rightMain">
          <el-tabs class="rightMain-tabs" style="height: 44px" v-model="activeName2">
            <el-tab-pane :label="$t('缩略图')" name="first"></el-tab-pane>
            <el-tab-pane :label="$t('详细信息')" name="second"></el-tab-pane>
          </el-tabs>
          <bs-main height="calc(100% - 44px)">
            <condition-row
              slot="header"
              @add="(data) => handCondition('add', data)"
              @action="(data) => handCondition('action', data)"
              @del="handCondition('del')"
              @edit="handCondition('edit')"
              @refresh="handCondition('refresh')"
              @search="(data) => handCondition('search', data)"
              ></condition-row>
            <pagination
              slot="footer"
              :total="page.total"
              :page="page.current"
              :limit="page.size"
              :page-sizes="page.sizes"
              :showAllChecked="true" 
              :allChecked="allSize"
              @all="handleChangeAllSize"
              @pagination="pageChange"></pagination>
            
            <div style="height: 100%;" v-loading="listFetching">
              <div style="margin-left: -15px;" v-show="activeName2 === 'first'">
                <mini-panel
                  ref="miniPanel"
                  class="center"   
                  :datas="mediaData"
                  @dbClick="_openPreView" />
              </div>
              <list
                ref="list"
                class="center"
                height="calc( 100% - 15px )"
                v-show="activeName2 === 'second'"
                :list-data="mediaData"
                :has-select="true"
                :list-cols="listCols"
                :action-opts="actionOpts"
                :init-cols-props.sync="initColsProps"
                @editClick="handleEditClick"
                @delClick="handleDelClick"
                @sort="handleListSort"
                @cell-double-click="_openPreView">
                <!-- <template slot="fileSizeSlot" slot-scope="{row}">
                  {{ row.fileSize }}
                </template> -->
                <template slot="auditStateSlot" slot-scope="{row}">
                  {{ row | getAuditStateName }}
                </template>
                <template slot="typeSlot" slot-scope="{row}">
                  {{ row.type | getTypeName }}
                </template>
                <template slot="validitySlot" slot-scope="{row}">
                  {{ row.validity ? '有效' : '无效' }}
                </template>
                <template slot="qrCodeSlot" slot-scope="{row}">
                  <a :href="row.qrCode" target="_blank">{{ row.qrCode }}</a>
                </template>
                <template slot="actionSlot" slot-scope="{row}">
                  <el-button class="smini-btn" type="primary" size="mini" @click.native="handleSnapshotClick(row)">{{ $t('快照') }}</el-button>
                  <bs-edit-button-icon class="smini-btn" @click.native="handleEditClick(row)" v-has="'MEDIA_MEDIA_UPDATE'" :showIcon="false" size="mini"></bs-edit-button-icon>
                  <bs-delete-button-icon class="smini-btn" @click.native="handleDelClick(row)" v-has="'MEDIA_MEDIA_DELETE'" :showIcon="false" btnType="danger" size="mini"></bs-delete-button-icon>
                </template>
              </list>
            </div>
           
          </bs-main>
        </el-main>
    </el-container>
    <form-dialog
      :visible.sync="formDialog.show"
      :file-type="formDialog.fileType"
      :op-type="formDialog.opType"
      :form="formDialog.form"
      @addClick="addClickHandle"
      @updateClick="updateClickHandle"></form-dialog>
    <dvb-form-dialog
      :visible.sync="dvbFormDialog.show"
      :file-type="dvbFormDialog.fileType"
      :op-type="dvbFormDialog.opType"
      :form="dvbFormDialog.form"
      @addClick="addClickHandle"
      @updateClick="updateClickHandle"></dvb-form-dialog>
    <web-pic-catch-dialog 
      :visible.sync="webCatchFormDialog.show"
      :file-type="webCatchFormDialog.fileType"
      :op-type="webCatchFormDialog.opType"
      @ok="webPicCatchOk"></web-pic-catch-dialog>
    <upload-dialog
      :visible.sync="uploadDialogShow"
      :init-folder-id="folderId"
      :init-user-id="searchUserId"
      @close="fetchList" />
    <preview-dialog :visible.sync="previewDialog.show" :pre-data="previewDialog.preData" />
  </div>
</template>

<script>
import MediaMenuTree from '../components/MediaMenuTree'
import MediaTag from '../components/MediaTag'
import MiniPanel from '../components/MiniPanel'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import ConditionRow from './components/ConditionRow'
import FormDialog from './components/FormDialog'
import DvbFormDialog from './components/DvbFormDialog'
import WebPicCatchDialog from './components/WebPicCatchDialog'
import UploadDialog from './components/UploadDialog'
import PreviewDialog from '../components/PreviewDialog'
// import {ListConfigSave} from '@/mixins/ListConfigSave'
import {genMediaMixin, MEDIA_MIXIN_CONST} from '@/mixins/mediaMixins.js'

import {fileTypeMap, webImageUrl, fileTypeOpts, FILETYPE} from './const'
import MediaApi from '@/api/media'
import CommonApi from '@/api/common'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters, mapActions} = createNamespacedHelpers('media')
import {getFileSize} from '@/utils'
import { requestOpts } from '@/utils/request.js'

export default {
  // mixins: [ListConfigSave],
  mixins: [genMediaMixin(MEDIA_MIXIN_CONST.TYPE_MEDIA_CENTER)],
  filters: {
    getFileSize,
    getTypeName(v) {
      let fileType = fileTypeOpts.find(item => item.value == v)
      return fileType ? fileType.label : v
    },
    getAuditStateName(v) {
      let msg = ''
      if(v.auditState === 0) {
        // -1:待转码 -2:转码失败 -3:转码中
        switch(v.state) {
          case -1:
            msg = '待转码'
            break
          case -2:
            msg = '转码失败'
            break
          case -3:
            msg = '转码中'
            break
          default:
            msg = "不可用"
        }
        return msg
      } else {
        return v.auditState == '3' ? '可用' : '不可用'
      }
    }
  },
  components: {
    PreviewDialog,
    UploadDialog,
    FormDialog,
    DvbFormDialog,
    WebPicCatchDialog,
    MediaMenuTree,
    MediaTag,
    MiniPanel,
    List,
    Pagination,
    ConditionRow
  },
  data() {

    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }

    return {
      menuApiObj: {
        get: MediaApi.getCatalogue,
        add: MediaApi.saveCatalogue,
        update: MediaApi.updateCatalogue,
        del: MediaApi.delCatalogue,
        bottomGet: MediaApi.getFollow,
        getOtherMedia: MediaApi.getOtherMedia
      },
      mediaForm: { // 媒体添加或编辑表单
        "attributes": {}, // 属性map
        "comment": "", // 描述
        "content": "", // 内容
        "duration": 0, // 每页时长
        "endDate": "", // 结束时间
        "fileId": 0, // 文件id
        "folderId": 0, // 所属媒体文件夹id 先写死1
        "id": 0, // 媒体id
        "name": "", // 媒体名称
        "sound": 0, // 声音
        "startDate": "", // 开始时间
        "state": 0, // 媒体状态
        "tagId": [], // 标签id
        "innerTags": [], // 内置标签值
        "thumbnailFile": "", // 缩略图
        "type": 0 // 类型
      },
      formDialog: {
        show: false,
        fileType: '',
        opType: ''
      },
      dvbFormDialog: {
        show: false,
        fileType: '',
        opType: ''
      },
      webCatchFormDialog: {
        show: false,
        fileType: '',
        opType: ''
      },
      previewDialog: {
        show: false
      },
      activeName: 'first',
      activeName2: 'first',
      listCols: [
        {label: '名称', prop: 'name', headerContextMenus, minwidth: 80, showOverflowTooltip: true},
        {label: '大小', prop: 'fileSize', headerContextMenus, minwidth: 80},
        {label: '类型', prop: 'type', headerContextMenus, minwidth: 80, slot: true},
        {label: '状态', prop: 'auditState', headerContextMenus, minwidth: 80, slot: true},
        {label: '宽', prop: 'width', headerContextMenus, minwidth: 80},
        {label: '高', prop: 'height', headerContextMenus, minwidth: 80},
        {label: '持续时间', prop: 'duration', headerContextMenus, minwidth: 100},
        {label: '被使用', prop: 'refCount', headerContextMenus, minwidth: 100},
        {label: '有效性', prop: 'validity', headerContextMenus, minwidth: 100, slot: true},
        {label: '二维码地址', prop: 'qrCode', headerContextMenus, minwidth: 100, slot: true},
        {label: '修订号', prop: 'revision', headerContextMenus, minwidth: 100},
        {label: '创建时间', prop: 'createdAt', headerContextMenus, minwidth: 100, showOverflowTooltip: true},
      ],
      sortFieldMap: {
        'name': 1,
        'fileSize': 2,
        'type': 3,
        'auditState': 4,
        'width': 5,
        'height': 6,
        'duration': 7,
        'refCount': 8,
        'validity': 11,
        'revision': 9,
        'createdAt': 10,
        'qrCode': 13
      },
      initColsProps: ['name', 'fileSize', 'type', 'auditState', 'width', 'height', 
        'duration', 'refCount', 'validity', 'qrCode', 'revision', 'createdAt'],
      search: {
        queryType: 0,
        queryParam: ''
      },
      sort: {
        orders: '',
        sortField: ''
      },
      tagIds: '',
      allSize: false,
      actionOpts: {
        name:'操作',
        show: true,
        hidEditBtn: true,
        hidDelBtn: true,
        slot: true,
        align: 'center',
        width: '180px'
      },
    }
  },
  computed:{
    ...mapGetters(['tagList', 'needFetchingList']),
    needFetching() {
      return this.needFetchingList('media')
    },
    searchUserId() {
      return this.search.ownerUserId ? this.search.ownerUserId : ''
    },
    uploadDialogShow: {
      get() {
        return this.$store.state.media.isQuikUpload
      },
      set(val) {
        this.$store.dispatch('media/changeQuikUpload', {
          key: 'isQuikUpload',
          value: false
        })
      }
    }
  },
  watch: {
    activeName(v) {
      console.log(v)
      if (v === 'second') {
        this.getTagList()
      } else {
        this.tagIds = ''
      }
    },
    needFetching(v) {
      if (v) {
        if (this.activeName === 'second') { // 当前正在标签页
          this.tagIds && this.fetchList() // 且已选标签才刷新请求
        } else { // 在目录树页
          const noReqId = [-1, -2] // 不做请求的目录ID
          noReqId.indexOf(this.folderId) === -1 && this.fetchList()
        }
        this.clearNeedFetcing({change: 'media'})
      }
    }
  },
  created () {
    this.pageChange({page: this.page.current, limit: this.page.size})
    this.getTagList()
    if (!this.$_has('MEDIA_MEDIA_DELETE') && !this.$_has('MEDIA_MEDIA_UPDATE')) {
      this.actionOpts = {
        show: false
      }
    } 
    // else {
    //   this.actionOpts = {
    //     ...this.actionOpts,
    //     hidEditBtn: !this.$_has('MEDIA_MEDIA_UPDATE'),
    //     hidDelBtn: !this.$_has('MEDIA_MEDIA_DELETE')
    //   }
    // }
  },
  methods: {
    ...mapActions(['getTagList', 'getTagTree', 'clearNeedFetcing']),
    handleTagClick(t) {
      this.tagIds = t.id
      this.page.current = 1
      this.fetchList()
      console.log('tag按下', t)
    },
    handleEditClick(row) {
      if (this._isSubOrOther()) return
      console.log('edit', row)
      this._openEditView(row)
    },
    handleDelClick(row) {
      if (this._isSubOrOther()) return
      this._handleDel(row)
      console.log('del', row)
    },
    handleSnapshotClick(row) {
      if(!row.snapshotPath) {
        this.$message.error('没有可以查看的快照')
        return
      }
      window.open(row.snapshotPath)
    },
    handleListSort({type, prop}) {
      if (this.sortFieldMap[prop]) {
        this.sort = {
          sortField: this.sortFieldMap[prop],
          orders: type.toLowerCase()
        }
        this.fetchList()
      }
    },
    getActiveItem() {
      if (this.activeName2 === 'first') {
        console.log(this.$refs.miniPanel.getActiveItem())
        return this.$refs.miniPanel.getActiveItem()
      } else {
        let items = this.$refs.list.getActiveItem()
        return items.length === 1 ? items[0] : items.length === 0 ? null : items
      }
    },
    webPicCatchOk({
      spaceX,
      spaceY,
      width,
      height,
      url
    }, closeFn) {
      const mediaFormCopy = JSON.parse(JSON.stringify(this.mediaForm))
      this.formDialog = {
        ...this.formDialog,
        show: true,
        fileType: FILETYPE.WEB_CAPTURE,
        opType: '1',
        form: {
          ...mediaFormCopy,
          startDate: this.$moment().format('YYYY-MM-DD'),
          endDate: this.$moment().add(1, 'month').format('YYYY-MM-DD'),
          type: FILETYPE.WEB_CAPTURE,
          folderId: this.folderId,
          content: `${webImageUrl}?url=${url}&width=${width}&height=${height}&spaceX=${spaceX}&spaceY=${spaceY}`
        }
      }
    },
    _isSubOrOther() {
      if (this.folderId === -1 || this.folderId === -2 || this.isOtherMenu) {
        this.$alert('提示', '此目录不可操作')
        return true
      }
      return false
    },
    handCondition(type, data) {
      switch(type) {
        case 'add':
          if (this._isSubOrOther()) return
          this._openAddView(data)
          break;
        case 'action':
          this._handleAction(data)
          break;
        case 'del':
          if (this._isSubOrOther()) return
          this._handleDel(
            this.getActiveItem()
          )
          break;
        case 'edit':
          if (this._isSubOrOther()) return
          this._openEditView(
            this.getActiveItem()
          )
          break;
        case 'refresh':
          this._handleRefresh()
          break;
        case 'search':
          this._handleSearch(data)
          break;
        default: console.log('未知操作');
      }
    },
    _handleAction(type) {
      switch(type) {
        case '上传':
          if (this._isSubOrOther()) return
          this.$store.dispatch('media/changeQuikUpload', {
            key: 'isQuikUpload',
            value: true
          })
          break;
        case '下载':
          this._openDownLoad(
            this.getActiveItem()
          )
          break;
        case '预览':
          this._openPreView(
            this.getActiveItem()
          )
          break;
        default:
      }
    },
    _handleSearch({name, value}) {
      this.search = {
        ...this.search,
        queryParam: value,
        queryType: name
      }
      this.page.current = 1
      this.fetchList()
    },
    _handleRefresh() {
      this.fetchList()
      this.$message.success('刷新成功')
    },
    async _openDownLoad(file) {
      if (!file) {
        this.$alert('提示', '请先选择文件')
        return
      }
      if (file instanceof Array) {
        this.$alert('提示', '此操作不支持多选')
        return
      }
      const passFileType = [ // 能下载的文件
        FILETYPE.TEXT,
        FILETYPE.VIDEO,
        FILETYPE.AUDIO,
        FILETYPE.LOCAL_TEXT,
        FILETYPE.QRCODE,
        FILETYPE.PICTURE,
        FILETYPE.NET_PICTURE,
        FILETYPE.WEB_CAPTURE
      ]
      if (passFileType.indexOf(String(file.type)) === -1) return this.$alert('提示', '对不起，该媒体类型无法下载')
      if (file.path) {
        const previewTokenRes = file.path ? await CommonApi.previewToken({path: encodeURIComponent(file.path)}) : null
        var tempwindow=window.open('_blank');
        tempwindow.location.href = previewTokenRes ? previewTokenRes : file.path
      } else {
        this.$alert('提示', '对不起，未获取到文件地址，无法下载')
      }
    },
    async _openPreView(file) {
      if (!file) {
        this.$alert('提示', '请先选择文件')
        return
      }
      if (file instanceof Array) {
        this.$alert('提示', '此操作不支持多选')
        return
      }
      const passFileType = [ // 能预览的文件类型
        FILETYPE.VIDEO,
        FILETYPE.AUDIO,
        FILETYPE.TEXT,
        FILETYPE.LOCAL_TEXT,
        FILETYPE.QRCODE,
        FILETYPE.NET_PICTURE,
        FILETYPE.PICTURE,
        FILETYPE.WEB_CAPTURE
      ]
      // if (passFileType.indexOf(String(file.type)) === -1) return this.$alert('提示', '对不起，该媒体类型无法预览')
      // 重新获取url的token
      const previewTokenRes = file.path ? await CommonApi.previewToken({path: encodeURIComponent(file.path)}) : null
      const _isText = [FILETYPE.TEXT,FILETYPE.LOCAL_TEXT].some(i => i === String(file.type))
      const _isNET_PICTURE = String(file.type) === FILETYPE.NET_PICTURE
      if (_isText || _isNET_PICTURE) {
         // 获取文本文件内容
        const res = await MediaApi.getInfo({id: file.id}) 
        if(res) {
          let argus = res.argus ? JSON.parse(res.argus) : {}
          let attributes = argus.attributes
          if (attributes && typeof attributes === 'string') {
            attributes = JSON.parse(attributes)
          }
          this.previewDialog = {
            ...this.previewDialog,
            show: true,
            preData: {
              ...argus,
              ...file,
              ...res,
              ...attributes,
              showType: 3,
              _isText
            }
          }
          if(_isText) {
            const preContent = await MediaApi.getLocalInfo({path: previewTokenRes ? previewTokenRes : file.path})
            if(preContent) {
              this.previewDialog.preData.content = preContent
            }
          }
        }
      } else {
        this.previewDialog = {
          ...this.previewDialog,
          show: true,
          preData: {
            ...file,
            showType: 3,
            _isText: false
          }
        }
        if(previewTokenRes) {
          this.previewDialog.preData.path = previewTokenRes
        }
      }
    },
    async getInfo(id, cb) {
      const res = await MediaApi.getInfo({id})
      cb && cb(res)
    },
    _openEditView(_file) {
      let file
      if (!_file) {
        file = this.getActiveItem()
        console.log(file)
        if (!file) {
          this.$alert('提示', '请先选择文件')
          return
        }
        if (file instanceof Array && file.length > 1) {
          this.$alert('提示', '此操作不支持多选')
          return
        }
      } else {
        file = _file
        if (!file) {
          this.$alert('提示', '请先选择文件')
          return
        }
        if (file instanceof Array && file.length > 1) {
          this.$alert('提示', '此操作不支持多选')
          return
        }
      }

      this.getTagTree(this.search.ownerUserId ? {
        ownerUserIds: [this.search.ownerUserId]
      } : {_self: true})

      this.getInfo(file.id, (res) => {
        const copyFile = JSON.parse(JSON.stringify(file))
        let argus = res.argus ? JSON.parse(res.argus) : {}
        let attributes = argus.attributes
        if (attributes && typeof attributes === 'string') {
          attributes = JSON.parse(attributes)
        }

        if (file.type == '10') {
          // 打开dvb媒体编辑
          this.dvbFormDialog = {
            ...this.dvbFormDialog,
            show: true,
            opType: '2',
            form: {
              ...argus,
              ...copyFile,
              ...res,
              innerTags: res.innerTag,
              tagId: res.tag.map(i => i.id),
              attributes: attributes ? attributes : {}
            }
          }
        } else {
          this.formDialog = {
            ...this.formDialog,
            show: true,
            fileType: `${copyFile.type}`,
            opType: '2',
            form: {
              ...argus,
              ...copyFile,
              ...res,
              innerTags: res.innerTag,
              tagId: res.tag.map(i => i.id),
              attributes: attributes ? attributes : {}
            }
          }
        }
      })


    },
    _handleDel(file) {
      if (!this.allSize && !file) {
        this.$alert('提示', '请先选择文件')
        return
      }
      let bool = false
      let queryData = {}
      if(!this.allSize) {
        if (file instanceof Array) {
          file.forEach(item => {
            if(item.refCount > 0) {
              bool = true
              return
            }
          })
        }else{
          if(file.refCount > 0) {
            bool = true
          }
        }
      } else {
        queryData = {
          ...this.search,
          total: this.page.total,
          allSize: this.allSize
        }
        if(this.activeName === 'first') {
          queryData.folderId = this.folderId
        } else {
          queryData.tagId = this.tagIds
          delete queryData.ownerUserId
        }
      }
      if(bool) {
        this.$alert('提示', '选择的媒体已被使用,不能删除')
        return
      }
      this.$confirm('提示', '是否确认删除？').then(bool => {
        bool && this.delMedia(file, queryData)
        this.allSize = false
      })
    },
    _openAddView(type) {
      const mediaFormCopy = JSON.parse(JSON.stringify(this.mediaForm))
      this.getTagTree(this.getTagTree(this.search.ownerUserId ? {
        ownerUserIds: [this.search.ownerUserId]
      } : {_self: true}))
      if (type === 'DVB频道') {
        this.dvbFormDialog = {
          ...this.dvbFormDialog,
          show: true,
          fileType: fileTypeMap[type],
          opType: '1',
          form: {
            ...mediaFormCopy,
            type: fileTypeMap[type],
            folderId: this.folderId,
            dvbType: '1',
            attributes: {
              terminalId: '',
              begin: 0,
              end: 0,
            },
            startDate: this.$moment().format('YYYY-MM-DD'),
            endDate: this.$moment().add(1, 'month').format('YYYY-MM-DD')
          }
        }
      } else if (type === '网页截图') {
        this.webCatchFormDialog = {
          ...this.webCatchFormDialog,
          show: true,
          fileType: fileTypeMap[type],
          opType: '1'
        }
      } else {
        let form = {
          ...mediaFormCopy,
          type: fileTypeMap[type],
          folderId: this.folderId,
          startDate: this.$moment().format('YYYY-MM-DD'),
          endDate: this.$moment().add(1, 'month').format('YYYY-MM-DD')
        }
        if (type === '文件夹') {
          form.attributes.sort = '1'
          form.attributes.orders = 'asc'
          form.duration = 10
          form.sound = 50
          form.folderType = 1
        }
        if (type === '网络图片' || type ==='网络文本') {
          form.attributes.refreshTimeArr = ['00','10','00']
        }
        this.formDialog = {
          ...this.formDialog,
          show: true,
          fileType: fileTypeMap[type],
          opType: '1',
          form
        }
      }
    },
    // 选择所有页
    handleChangeAllSize(val) {
      this.allSize = val
      this.$refs.list.clearSelection();
    },
    te(arg) {
        const hasKey = this.$te(arg)
        if (hasKey) {
        const result = this.$t(arg)
        return result
        }
        return arg
    },

  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.mediaTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0 !important;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    padding: 0;
  }
}
.mediaTree {
  // overflow-x: scroll;
  ::v-deep .el-tabs__item {
    padding: 0 !important;
    width: 125px;
    text-align: center;
  }
  ::v-deep .el-tabs__item:last-child {
    border-right: 0 !important;
  }
  // ::v-deep .el-tabs__item.is-active{background: #fff;border-bottom:0 !important;
  //   }
}
// .leftMain >>> .el-tabs__content {
//   padding-left: 0;
//   padding-right: 0;
// }
// .leftMain {
//   ::v-deep .el-tabs__item{padding:0 !important; width:125px; text-align:center;height: 44px !important; line-height: 44px !important;}
//   ::v-deep .el-tabs__item:last-child{border-right:0 !important;}
// }
</style>

<style>
.media-center .rightMain .el-tabs {
  border-bottom: 0;
}
.media-center .rightMain .el-tabs__content {
  padding: 0;
}
.el-tabs--border-card{border: 0 !important;}
.el-button-group .el-button--primary:last-child {
  height: 32px;
}
.el-button-group .el-button--primary:first-child {
    height: 30px;
}
</style>